Vuex

核心概念

State

单一状态树（用一个对象就包含了全部的应用层级状态），类似于 vue 中的 data

定义

let store = new Vuex.Store({
    state: {
        count: 0
    }
})

访问

最简单的是在计算属性中返回某个状态，这样每当 store.state 发生变化时，能重新求取计算属性，并触发更新相关联的 DOM。

computed: {
    count () {
        return this.$store.state.count
    }
}

mapState 辅助函数 + 对象展开运算符

利用 mapState 辅助函数生成多个计算属性，利用对象展开运算符将 mapState 返回的对象和局部计算属性混合使用。
若同名，可以给 mapState 传一个字符串数组。

import { mapState } from 'vuex'

export default {
    //...
    computed: {
        otherComputed () { // 其他局部计算属性
            ...
        },
        ...mapState({
            countNumber: 'count', // 等于 'countNumber: state => state.count'
        })
    }
}

Getter

可以从 state 中派生出一些状态，类似于 vue 中的计算属性

定义

接受 state 作为第一个参数，可以接受其他 getter 作为第二个参数，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, done: true },
      { id: 2, done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    }
  }
})

访问

• 通过属性访问
• 通过方法访问，即让 getter 返回一个函数，可以给 getter 传参

// 通过属性访问
this.$store.getters.xxx

// 通过方法访问，getter 需要返回一个函数
this.$store.getters.xxx(xx)

mapGetters 辅助函数 + 对象展开运算符

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter'
    ])
  }
}

Mutation

更改 state 的唯一方式，必须是同步函数

参数

Action

类似 Mutation，但 Action 提交的是 mutation，不能直接改变 state，可以包含异步操作。

注册 Action 及参数

  Action 函数接受一个 context 对象，该对象与 store 实例具有相同的方法和属性（但不是 store 实例本身），因此可以通过 context.commit 提交一个 mutation，或通过 context.state 和 context.getters 来获取 state 和 getters。
  可以通过 ES6 的参数解构来简化代码。

actions: {
    // context 对象, obj 为载荷（其他参数）
    action1 (context, obj) {
        console.log(context)
        context.commit('xxx')
    },
    
    // 参数解构 context 对象
    action2 ({commit, state, getters}, obj) {
        console.log(commit, state, getters)
    }
}

触发 Action

// 以载荷形式分发
this.$store.dispatch('updateNumber',{
    number: 10
})

// 以对象形式分发
this.$store.dispatch({
    type: 'updateNumber',
    number: 10
})

Module